<template>
  <el-dialog :title="course ? '编辑课程' : '添加课程'" :close-on-click-modal="false" :destroy-on-close="true" width="600px" :visible.sync="isShow" class="add-class" :before-close="closeBox">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item prop="lessonProject" label="课题名称">
        <el-input v-model="ruleForm.lessonProject" autocomplete="off" placeholder="请输入课题名称"></el-input>
      </el-form-item>
      <el-form-item prop="classId" label="班级选择">
        <el-select v-model="ruleForm.classIds" placeholder="请选择班级" style="width: 100%;" multiple @change="handleSelect">
          <el-option :label="item.className" :value="item.classId" v-for="item in classLists" :key="item.classId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="startTime" label="开始时间">
        <el-date-picker v-model="ruleForm.startTime" type="datetime" placeholder="请选择开始时间" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" :picker-options="startDatePicker" style="width: 100%;"></el-date-picker>
      </el-form-item>
      <el-form-item prop="classHour" label="选择课时">
        <el-input-number v-model="ruleForm.classHour" autocomplete="off" placeholder="请输入课时" :min="1" style="width: 100%;"></el-input-number>
      </el-form-item>
      <el-form-item label="课时分钟">
        <el-input autocomplete="off" placeholder="每节课45分钟" disabled></el-input>
      </el-form-item>
      <el-form-item prop="endTime" label="结束时间">
        <el-date-picker v-model="ruleForm.endTime" type="datetime" placeholder="请选择结束时间" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" :picker-options="endDatePicker" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center;">
      <el-button type="primary" class="my-button" @click="submitForm('ruleForm')">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { classList } from '@/api/teacher/manage/class'
import { saveOnlineCourse, updateOnlineCourse } from '@/api/teacher/onlineCourse'
export default {
  props: ['course'],
  data () {
    return {
      isShow: true,
      classLists: [],
      ruleForm: {
        id: this.id,
        lessonProject: undefined,
        classIds: undefined,
        classNames: undefined,
        startTime: undefined,
        classHour: undefined,
        endTime: undefined,
        isRemind: 0,
        remindMinute: 0
      },
      rules: {
        lessonProject: [{ required: true, message: '请输入课题名称', trigger: 'blur' }],
        classIds: [{ required: true, message: '请选择班级', trigger: 'blur' }],
        startTime: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
        classHour: [{ required: true, message: '请选择课时', trigger: 'blur' }],
        endTime: [{ required: true, message: '请选择结束时间', trigger: 'blur' }]
      },
      values: '',
      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate()
    }
  },
  methods: {
    beginDate () {
      return {
        disabledDate (time) {
          return time.getTime() < Date.now()// 开始时间不选时，结束时间最大值小于等于当天
        }
      }
    },
    // 提出结束时间必须大于提出开始时间
    processDate () {
      return {
        disabledDate (time) {
          return time.getTime() < Date.now()
        }
      }
    },
    inits () {
      if (this.course) {
        const data = this.course
        this.ruleForm = {
          id: data.id,
          lessonProject: data.lessonProject,
          classIds: data.classIds.split(','),
          classNames: data.classNames.split(','),
          startTime: data.startTime,
          classHour: data.classHour,
          endTime: data.endTime,
          isRemind: 0,
          remindMinute: 0
        }
      }
    },
    async classList () {
      const res = await classList()
      this.classLists = res.data
    },
    handleSelect (e) {
      this.ruleForm.classNames = this.classLists.filter(item => this.ruleForm.classIds.indexOf(item.classId) > -1).map(item => item.className)
    },
    // 提交表单
    submitForm (ruleForm) {
      this.$refs[ruleForm].validate(async valid => {
        if (valid) {
          if (this.ruleForm.classIds.length < 1) {
            this.$message.error('请选择班级')
            return
          }
          this.ruleForm.classIds = this.ruleForm.classIds.join(',')
          this.ruleForm.classNames = this.ruleForm.classNames.join(',')
          let res
          if (this.course) {
            res = await updateOnlineCourse(this.ruleForm)
          } else {
            res = await saveOnlineCourse(this.ruleForm)
          }
          if (res.code === '200') {
            this.$message.success(this.course ? '编辑成功' : '添加成功')
            // 重新刷新在线课程列表
            this.$emit('handleEmit', 'confirm')
          } else {
            this.$message.error(res.message)
            this.closeBox()
          }
        } else {
          return false
        }
      })
    },
    closeBox () {
      this.$emit('handleEmit')
    }
  },
  mounted () {
    this.classList()
    this.inits()
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
  .course-study {
    height: 937px;
    width: 1200px;
    margin: 0 auto;
    .left-list {
      width: 452px;
      height: 100%;
    }
    .right-content {
      width: 728px;
      height: 100%;
      background: #fff;
      border: 1px solid rgba(229, 229, 229, 1);
      border-radius: 5px;
      overflow-y: scroll;
    }
  }
  .my-button {
    ::v-deep &.el-button--primary {
      width: 350px;
      height: 55px;
      border-radius: 45px;
      font-size: 18px;
    }
  }
</style>
